<template>
  <view class="emergency-incidents">
    <view class="header">
      <view class="tabs">
        <text
          v-for="(tab, index) in tabs"
          :key="index"
          :class="['tab-item', { active: currentTab === tab.value }]"
          @click="handleTabChange(tab.value)"
        >
          {{ tab.text }}
        </text>
      </view>
      <text class="view-all" @click="navigateToCzList">查看全部 &gt;</text>
    </view>
    <view class="incident-list">
      <view
        v-for="(item, index) in incidentList"
        :key="index"
        class="incident-item"
      >
        <view class="status-container">
          <text class="status-label" :data-status="item.eventStatusCode">{{
            item.status
          }}</text>
        </view>
        <image
          :src="item.thumbnail || '/static/default-thumbnail.png'"
          class="thumbnail"
        ></image>
        <view class="content">
          <text class="title">{{ item.title }}</text>
          <view class="details">
            <text>时间：{{ item.eventTime }}</text>
            <text>地点：{{ item.address }}</text>
          </view>
          <view class="status">
            <text
              :class="[
                'status-labelw',
                `status-labelw-${item.eventClass.toLowerCase()}`,
              ]"
            >
              {{ item.eventClass }}
            </text>
            <text
              :class="[
                'status-labelw',
                `status-labelw-${item.eventSource.toLowerCase()}`,
              ]"
            >
              {{ item.eventSource }}
            </text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>
<script setup lang="ts">
import { onLoad } from '@dcloudio/uni-app';
import { ref, computed } from 'vue';
import api from '@/api/modules/event';

// 定义标签选项
const tabs = ref<Tab[]>([
  { value: '301', text: '紧急事件' },
  { value: 'latest', text: '最新事件' },
]);

// 事件列表数据
const incidentList = ref<Incident[]>([]);

// 当前选中的标签
const currentTab = ref('301');

// 定义分页参数对象
const paginationParams = ref({
  pageNum: 1,
  pageSize: 3, // 默认查3条
});

interface Incident {
  thumbnail?: string;
  title: string;
  eventTime: string;
  address: string;
  eventClass: string;
  eventSource: string;
  status: string;
  eventStatusCode: string;
}

interface Tab {
  value: string;
  text: string;
}

// 获取紧急事件列表
const fetchBusiIncidentList = async () => {
  try {
    const params = {
      pageNum: paginationParams.value.pageNum,
      pageSize: paginationParams.value.pageSize,
    };
    console.log('分页参数:', params);
    const res = await api.getbusizeventlist(params);
    console.log('列表数据:', res);
    incidentList.value = res.data.busizEventList.map((event) => ({
      thumbnail: event.pic,
      title: event.eventName,
      eventTime: event.eventTime,
      address: event.address,
      eventClass: event.eventClass,
      eventSource: event.eventSource,
      status: event.eventStatus,
      eventStatusCode: event.eventStatusCode,
    }));
    console.log('事件列表:', incidentList.value);
  } catch (error) {
    console.error('获取紧急事件列表失败', error);
  }
};

// 获取最新事件列表
const fetchEnforceIncidentList = async () => {
  try {
    const params = {
      pageNum: paginationParams.value.pageNum,
      pageSize: paginationParams.value.pageSize,
    };
    console.log('分页参数:', params);
    const res = await api.getenforelist(params);
    console.log('列表数据:', res);

    // 检查列表长度，不超过3个则直接使用，超过3个则截取前3个
    const listToDisplay =
      res.data.busizEventList.length <= 3
        ? res.data.busizEventList
        : res.data.busizEventList.slice(0, 3);

    incidentList.value = listToDisplay.map((event) => ({
      thumbnail: event.pic,
      title: event.eventName,
      eventTime: event.eventTime,
      address: event.address,
      eventClass: event.eventClass,
      eventSource: event.eventSource,
      status: event.eventStatus,
      eventStatusCode: event.eventStatusCode,
    }));
    console.log('事件列表:', incidentList.value);
  } catch (error) {
    console.error('获取最新事件列表失败', error);
  }
};

// 根据当前标签获取事件列表
const fetchIncidentList = async () => {
  if (currentTab.value === '301') {
    await fetchBusiIncidentList();
  } else if (currentTab.value === 'latest') {
    await fetchEnforceIncidentList();
  }
};

// 处理标签切换
const handleTabChange = async (tabName: string) => {
  currentTab.value = tabName;
  await fetchIncidentList(); // 切换标签时重新获取事件列表
};

// 页面加载时获取事件列表
onLoad(() => {
  fetchIncidentList();
});

const navigateToCzList = () => {
  uni.navigateTo({
    url: '/pages/czlist/index',
  });
};
</script>

<style lang="scss" scoped>
.emergency-incidents {
  padding: 20rpx;
  border-radius: 10rpx;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 28.5rpx;
}

.tabs {
  display: flex;
  border: 1rpx solid transparent;
  border-radius: 10rpx;
  overflow: hidden;
}

.tab-item {
  font-size: 27rpx;
  padding: 10rpx 20rpx;
  color: #2263bf;
  background-color: #e8f2ff;
  background: #ffffff;
  box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(70, 102, 149, 0.12);

  &.active {
    background-color: #2263bf;
    color: #fff;
  }
}

.view-all {
  cursor: pointer;
  font-family: PingFangSC, PingFang SC;
  font-weight: 500;
  font-size: 23rpx;
  color: #2263bf;
  line-height: 33rpx;
  text-align: right;
  font-style: normal;
}

.incident-list {
  margin-top: 10rpx;
}

.incident-item {
  display: flex;
  width: 692rpx;
  height: 223rpx;
  padding: 25rpx;
  margin-bottom: 20rpx;
  background: #ffffff;
  border-radius: 10rpx;
  position: relative;
}

.thumbnail {
  width: 269rpx;
  height: 169rpx;
  margin-right: 25rpx;
  background-color: #eee;
  border-radius: 8rpx;
}

.content {
  flex: 1;
}

.title {
  display: block;
  font-family: PingFangSC, PingFang SC;
  font-weight: 600;
  font-size: 27rpx;
  color: #333333;
  line-height: 38rpx;
  text-align: left;
  font-style: normal;
}

.details {
  display: flex;
  flex-direction: column;
  gap: 8rpx;
  font-family: PingFangSC, PingFang SC;
  font-weight: 500;
  font-size: 23rpx;
  color: #999999;
  line-height: 33rpx;
  text-align: left;
  font-style: normal;
  margin-top: 5rpx;
}

.status {
  display: flex;
  gap: 10rpx;
  margin-top: 10rpx;
}

// 新增样式
.status-container {
  position: absolute;
  top: 10rpx;
  right: 10rpx;
  z-index: 1;
}

.status-label {
  background: #d2f0ff;
  border-radius: 0rpx 0rpx 8rpx 8rpx;
  padding: 4rpx 12rpx;
  font-size: 22rpx;
  color: #fff;
  font-family: PingFangSC, PingFang SC;
  font-weight: 500;
  line-height: 33rpx;
  font-style: normal;
  //  0	未派发    10	已派发  99	已处理
  &[data-status='99'] {
    background: #e3d2ff;
    color: #9053ff;
  }

  &[data-status='10'] {
    background-color: #ffe9d2;
    color: #ff982b;
  }
  &[data-status='0'] {
    background: #d2f0ff;
    color: #45aff7;
  }
}

.status-labelw {
  padding: 4rpx 12rpx;
  border-radius: 8rpx;
  color: #fff;
  font-family: PingFangSC, PingFang SC;
  font-weight: 500;
  font-size: 23rpx;
  line-height: 33rpx;
  text-align: left;
  font-style: normal;

  &-紧急 {
    background: #ffe6e6;
    color: #ff2121;
  }

  &-重点 {
    background-color: #ff9f3a;
  }

  &-普通 {
    background-color: #91d5ff;
    color: #333;
  }

  &-智能事件 {
    background: #c5f1e6;
    color: #39aa92;
  }
  &-人工上报 {
    background: #d2f0ff;
    color: #45aff7;
  }
  &-巡查 {
    background: #e2e1ff;
    color: #9053ff;
  }
}
</style>
